<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智障本</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</head>
<body>
    <h1 align="center">记账管理</h1>
    <br>
    <!-- 查询条件开始 -->
    <blockquote class="layui-elem-quote" style="text-align: center">
        <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-inline">
                        <label class="layui-form-label">搜索选择框</label>
                        <div class="layui-input-inline">
                            <select name="billType"  lay-search="">
                                <option value="">不限</option>
                                <option value="支出">支出</option>
                                <option value="收入">收入</option>
                                <option value="转账">转账</option>
                                <option value="借出">借出</option>
                                <option value="借入">借入</option>
                                <option value="还入">还入</option>
                                <option value="还出">还出</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="beginTime" id="beginTime" placeholder="yyyy-MM-dd" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endTime" placeholder="yyyy-MM-dd" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <div class="layui-inline" >
                     <input type="button" value="查询" class="layui-btn" lay-submit id="doSearch" lay-filter="doSearch">
                     <input type="reset" value="重置" class="layui-btn  layui-btn-primary">
                     <input type="button" value="添加" class="layui-btn layui-btn-warm" id="doAdd"  lay-submit lay-filter="doAdd">
                </div>
            </div>
        </form>
    </blockquote>
    <!-- 查询条件结束-->

    <!--    数据表格-->
    <div style="width: 100%">
       <table class="layui-hide" id="billTable" lay-filter="billTable" ></table>
    </div>

<!--    弹出层-->
<script type="text/html" id="billHtml" style="display: none">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="typeId" value="1" title="支出" >
                <input type="radio" name="typeId" value="2" title="收入" >
                <input type="radio" name="typeId" value="3" title="转账" >
                <input type="radio" name="typeId" value="4" title="借出" >
                <input type="radio" name="typeId" value="5" title="借入" >
                <input type="radio" name="typeId" value="6" title="还入" >
                <input type="radio" name="typeId" value="7" title="还出" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-block">
                    <input type="text" name="billTime" id="billTime" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">金额</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" placeholder="请输入金额" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">说明</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark" id="remark"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <div class="layui-inline" >
                <input type="button" value="添加" class="layui-btn" lay-submit id="doSubmit" lay-filter="doSubmit">
                <input type="reset" value="重置" class="layui-btn  layui-btn-primary">
                <input type="button" value="返回" class="layui-btn layui-btn-warm" lay-submit  id="doBack" lay-filter="doBack">
            </div>
        </div>
    </form>
</script>

</body>
<script type="text/javascript">
   layui.use(['form','laydate','layer','table','jquery'],function (){
       let form = layui.form;
       let laydate = layui.laydate;
       let layer = layui.layer;
       let table = layui.table;
       let $ = layui.jquery;

       //时间选择器
       laydate.render({
           elem: '#beginTime',
           type:"datetime"
       });
       laydate.render({
           elem: '#endTime',
           type:"datetime"
       });

       //渲染表格
       let billTable = table.render({
           elem: '#billTable'
           ,url: '/bills/queryBills.do' //数据接口
           ,defaultToolbar: ['filter', 'exports', 'print']
           ,title: '记账单'
           ,page: true //开启分页
           ,cols: [ [ //表头
                {field: 'id', title: 'ID',  sort: true, fixed: 'left',align: "center"}
               ,{field: 'title', title: '标题',align: "center"}
               ,{field: 'name', title: '类型',align: "center",  sort: true}
               ,{field: 'billTime', title: '时间',align: "center",  sort: true}
               ,{field: 'price', title: '金额',align: "center",  sort: true}
               ,{field: 'remark', title: '备注',align: "center"}
           ] ]
       });

      //监听模糊查询
       form.on("submit(doSearch)",function (obj){
           let data = obj.field;
           billTable.reload({
               where:data
           })
       })

       //监听添加事件
       let addHtml;
       form.on("submit(doAdd)",function (){
       addHtml = layer.open({
              type:1,
              title:"添加账单",
              closeBtn:1,
              content:$("#billHtml").html(),
              area:['800px','500px'],
              success:function (){
                  form.render()
                  laydate.render({
                      elem:'#billTime',
                      type:"datetime"
                  })

              }
          })
       })
       //监听添加提交按钮
       form.on("submit(doSubmit)",function (obj){
           let data = obj.field;
           $.post("/bills/addBills.do",data,function (res){
               if(res.code==200){
                   layer.msg(res.msg);
                   billTable.reload();
               }
           })
           return false;
       })
       //监听添加返回按钮
       form.on("submit(doBack)",function (){
           billTable.reload();
          layer.close(addHtml);
       })
   })
</script>
</html>